import React, { Component, PureComponent, memo } from 'react'
export class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'zjd',
      message: 'hellow',
      title: {
        job: 'coder',
      },
    }
  }
  changeName() {
    this.setState({
      name: 'qq',
    })
    const a = '1'
  }
  changeMessage() {
    this.setState({
      message: '你好',
    })
  }
  changeTitle() {
    this.state.title.job = 'bob'
    this.setState({})
  }
  render() {
    console.log('Test 的render函数被调用')
    return (
      <>
        <div>{this.state.name}</div>
        <div>{this.state.title.job}</div>
        <button onClick={() => this.changeName()}>改变名字</button>
        <button onClick={() => this.changeMessage()}>改变消息</button>
        <button onClick={() => this.changeTitle()}>改变title</button>
        <hr />
        <SonSon message={this.state.message} title={this.state.title}></SonSon>
        <hr />
        <Son></Son>
        <hr />
        <MomeSon></MomeSon>
      </>
    )
  }
}

// PureComponent
// 自动实现了shouldComponentUpdate进行校验
// 浅层比较props和state(的key值)
class SonSon extends PureComponent {
  render() {
    console.log('SonSon 的render函数被调用')
    return (
      <>
        <span>{this.props.message}</span>
        <div>{this.props.title.job}</div>
        <div>SonSon</div>
      </>
    )
  }
}
function Son(props) {
  console.log('Son 的render函数被调用')
  return (
    <>
      <div>son</div>
    </>
  )
}
function SonSonSon(props) {
  console.log('SonSonSon 的render函数被调用')
  return (
    <>
      <div>son</div>
    </>
  )
}
const MomeSon = memo(SonSonSon)
